<!-- 短信登录 - smsLogin  -->
<template>
	<view>
		<!-- 标题栏 -->
		<view class="head-box ss-m-b-60">
			<view class="ss-flex ss-m-b-20">
				<view class="head-title-active ss-m-r-40" @tap="showAuthModal('accountLogin')"
					>账号登录</view
				>
				<view class="head-title head-title-line head-title-animation">短信登录</view>
			</view>
			<view class="head-subtitle">未注册手机号请先点击下方立即注册</view>
		</view>

		<!-- 表单项 -->
		<uni-forms
			ref="smsLoginRef"
			v-model="state.model"
			:rules="state.rules"
			validateTrigger="bind"
			labelWidth="140"
			labelAlign="center"
		>
			<uni-forms-item name="mobile" label="手机号">
				<uni-easyinput
					placeholder="请输入手机号"
					v-model="state.model.mobile"
					:inputBorder="false"
					type="number"
				>
					<template v-slot:right>
						<button
							class="ss-reset-button code-btn code-btn-start"
							:disabled="state.isMobileEnd"
							:class="{ 'code-btn-end': state.isMobileEnd }"
							@tap="sendCode('smsLogin', state.model.mobile)"
						>
							{{ getSmsTimer('smsLogin') }}
						</button>
					</template>
				</uni-easyinput>
			</uni-forms-item>

			<uni-forms-item name="code" label="验证码">
				<uni-easyinput
					placeholder="请输入验证码"
					v-model="state.model.code"
					:inputBorder="false"
					type="number"
					maxlength="4"
				>
					<template v-slot:right>
						<button class="ss-reset-button login-btn-start" @tap="smsLoginSubmit">
							登录
						</button>
					</template>
				</uni-easyinput>
			</uni-forms-item>
		</uni-forms>

		<Verify
			@success="success"
			:mode="'pop'"
			:captchaType="'blockPuzzle'"
			:imgSize="{ width: '330px', height: '155px' }"
			ref="verifyRef"
			:top="0"
		></Verify>
	</view>
</template>

<script setup>
	import { computed, watch, ref, reactive, unref } from 'vue';

	import { code, mobile } from '/shop/validate/form';
	import { showAuthModal, closeAuthModal, getSmsCode, getSmsTimer } from '/shop/hooks/useModal';
	import $platform from '/shop/platform/index.js';
	import Verify from '/shop/components/verify/verify.vue';
	import $user from '/shop/api/user.js';
	import $userStore from '/shop/store/user.js';
	import test from '/shop/helper/test.js';
	import $helper from '/shop/helper/index.js';
	const verifyRef = ref();
	const smsLoginRef = ref(null);

	const emits = defineEmits(['onConfirm']);

	const props = defineProps({
		agreeStatus: {
			type: Boolean,
			default: false,
		},
	});

	// 数据
	const state = reactive({
		isMobileEnd: false, // 手机号输入完毕
		codeText: '获取验证码',
		model: {
			mobile: '', // 手机号
			code: '', // 验证码
		},
		rules: {
			code,
			mobile,
		},
	});

	// 2.短信登录
	async function smsLoginSubmit() {
		const validate = await unref(smsLoginRef)
			.validate()
			.catch((error) => {
				console.log('error: ', error);
			});
		if (!validate) return;

		if (!props.agreeStatus) {
			emits('onConfirm', true);
			$helper.toast('请勾选同意');
			return;
		}
		const { data, code } = await $user.smsLogin(state.model);
		if (code === '0') {
			$userStore().setToken(data.token);
			closeAuthModal();
		}
	}

	let event_code = '';
	let mobile_number = '';
	const sendCode = (event, mobile = '') => {
		if (!mobile) {
			$helper.toast('请输入手机号');
			return;
		}

		if (!test.mobile(mobile)) {
			$helper.toast('手机号码格式不正确');
			return;
		}
		event_code = event;
		mobile_number = mobile;
		verifyRef.value.show();
	};

	const success = (data) => {
		console.log('data: ', data);
		getSmsCode(event_code, mobile_number, data.captchaVerification, callback);
	};
	const callback = () => {
		console.log('回调....');
		state.isMobileEnd = true;

		setTimeout(() => {
			state.isMobileEnd = false;
		}, 60000);
	};
</script>

<style lang="scss" scoped>
	@import '../index.scss';
</style>
